<template>
    <el-dialog
        :title="工时"
        :visible.sync="dialogFormVisible"
        width="60%"
        height="50px"
        :append-to-body="true">
        <div  slot="title" class="header-title" style="font-size: 20px; text-align:center" >
            <span style="font-size: 20px">新增好友</span>
        </div>

        <div style="background-color: #f5f5f5;height:515px">
            <el-form
                ref="dataForm"
                :model="dataForm"
                :rules="dataRules"
                label-position="top"
                label-width="100px"
                :inline="true"
            >
                <el-form-item label="姓名" style="text-align:center"  prop="name">
                    <el-input v-model="dataForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别（男/女）" style="text-align:center"  prop="sex">
                    <el-input v-model="dataForm.sex" placeholder="请输入性别"></el-input>
                </el-form-item>
                <el-form-item label="年龄（岁）" style="text-align:center"  prop="age">
                    <!-- <el-input v-model="dataForm.totalTime" placeholder="请输入时间(小时)"></el-input> -->
                    <!-- 判断输入字必须为数字,且长度不能超过两个字符,限制数字大小用 el-input-number-->
                    <el-input-number v-model="dataForm.age"  placeholder="请输入年龄(岁)" 
                                onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" :min="0" :max="120" >
                    </el-input-number>
                </el-form-item>
                <el-form-item label="备注" style="text-align:center" prop="note">
                    <el-input v-model="dataForm.note" placeholder="请输入备注"></el-input>
                </el-form-item><el-form-item label="操作" style="text-align:center">
                    <el-button type="primary" @click="dataFormSubmit">保存</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template> 
<script>

export default {
    data(){
        return{
            msg: '',
            region:'',
            dataForm: {
                // id: undefined,
                name:'',//姓名
                age:'',//年龄
                sex:'',//性别
                note:'',//备注
            },
            dialogFormVisible: false,
            dataRules:{
                name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],//姓名
                sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],//性别         
                age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
            }
        }
        
    },
    

    methods:{
        init(id) {
        this.dialogFormVisible = true
        },

        dataFormSubmit(){
            this.$refs.dataForm.validate(valid =>{
                if(valid){
                    this.$post('/friend', this.dataForm).then(() => {
                    this.dialogFormVisible = false
                    this.$message.success('操作成功')
                    this.$emit('refreshDataList')
                    })
                }else {
                    this.$confirm('error!')
                }
            })
        }
    }
}
</script>
